<script setup lang='ts'>
import { watch, ref } from 'vue'
type defaultValueType = [number, number, number]

const props = withDefaults(defineProps<{
    modelValue?: defaultValueType,
    propertyName?: string
}>(), { withUndefined: true, propertyName: '属性值', readonly: false, modelValue: () => [1, 1, 1] })

const emits = defineEmits(["update:modelValue"]);

const inputHandler = (e: any, numberValues: defaultValueType | undefined, num: number) => {
    if (numberValues === undefined) return
    let numberArr = [...numberValues]
    numberArr[num] = Number(e.target.value)
    emits('update:modelValue', numberArr)
}
const longitude = ref()
const latitude = ref()
const height = ref()
const x = ref()
const y = ref()
const z = ref()
watch(() => props.modelValue, (val) => {
    longitude.value = val[0].toFixed(7)
    latitude.value = val[1].toFixed(7)
    height.value = val[2].toFixed(3)
    x.value = val[0].toFixed(2)
    y.value = val[1].toFixed(2)
    z.value = val[2].toFixed(2)
}, { immediate: true })
const update1 = () => {
    let a = [Number(x.value), Number(y.value), Number(z.value)]
    emits("update:modelValue", a)
}
</script>

<template>
    <div class="rotation" v-if="propertyName === '缩放'">
        <div class="input2" style="margin-bottom: 6px;">
            <label for="">{{ 'x轴缩放' }}</label>
            <input type="number" class="input_number" v-model.number="x" @blur="update1" @keydown.enter="update1"
                step="0.1" />
        </div>
        <div class="input2" style="margin-bottom: 6px;">
            <label for="">{{ 'y轴缩放' }}</label>
            <input type="number" class="input_number" v-model.number="y" @blur="update1" @keydown.enter="update1"
                step="0.1" />
        </div>
        <div class="input2">
            <label for="">{{ 'z轴缩放' }}</label>
            <input type="number" class="input_number" v-model.number="z" @blur="update1" @keydown.enter="update1"
                step="0.1" />
        </div>
    </div>

    <div class="rotation" v-else-if="propertyName === '偏移'">
        <div class="input2" style="margin-bottom: 6px;">
            <label for="">{{ 'x轴偏移' }}</label>
            <input type="number" class="input_number" v-model.number="x" @blur="update1" @keydown.enter="update1"
                step="0.1" />
        </div>
        <div class="input2" style="margin-bottom: 6px;">
            <label for="">{{ 'y轴偏移' }}</label>
            <input type="number" class="input_number" v-model.number="y" @blur="update1" @keydown.enter="update1"
                step="0.1" />
        </div>
        <div class="input2">
            <label for="">{{ 'z轴偏移' }}</label>
            <input type="number" class="input_number" v-model.number="z" @blur="update1" @keydown.enter="update1"
                step="0.1" />
        </div>
    </div>
    <div class="rotation" v-else-if="propertyName === '当前位置'">
        <div class="input2 readonly_style" style="margin-bottom: 6px;">
            <label for=""> {{ '经度' }}</label>
            <input type="number" class="input_number" :value="longitude" disabled />
            <span style="position: absolute;right: 5px;top: 2px;">°</span>
        </div>
        <div class="input2 readonly_style" style="margin-bottom: 6px;">
            <label for=""> {{ '纬度' }}</label>
            <input type="number" class="input_number" :value="latitude" disabled />
            <span style="position: absolute;right: 5px;top: 2px;">°</span>
        </div>
        <div class="input2 readonly_style">
            <label for=""> {{ '高度' }}</label>
            <input type="number" class="input_number" :value="height" disabled />
        </div>
    </div>
    <div v-else>
        <div class="input3">
            <input v-for="(_, index) in modelValue" :key="index" type="number" class="input_number"
                :value="modelValue[index]" @input="inputHandler($event, modelValue, index)" />
        </div>
    </div>
</template>

<style scoped>
.rotation {
    width: 100%;
    border-top: 1px solid #111111;
    border-bottom: 1px solid #111111;
    padding-top: 10px;
    padding-bottom: 10px;
}

.input2,
.input3 {
    width: 100%;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    font-size: 14px;
    line-height: 26px;
    color: rgba(230, 230, 230, 1);
}

.input2>label {
    display: inline-block;
    width: 70px;
    height: 26px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: 400;
    text-align: left;
}

.input2>input {
    display: inline-block;
    /* width: 190px; */
    flex: 1;
    height: 26px;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid #3b3c40;
    margin-right: 0;
    color: rgba(230, 230, 230, 1);
    padding-left: 11px;
    box-sizing: border-box;
}

.input3>input {
    display: inline-block;
    width: 33.3%;
    height: 26px;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid #3b3c40;
    margin-right: 0;
    color: rgba(230, 230, 230, 1);
    padding-left: 11px;
    box-sizing: border-box;
}

.input2>input:hover,
.input3>input:hover,
.input2>input:focus,
.input3>input:focus {
    border: 1px solid rgba(44, 104, 247, 1);
}

.readonly_style {
    cursor: not-allowed;
    cursor: no-drop;
    user-select: none;
}

.input_number::-webkit-outer-spin-button,
.input_number::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input_number[type="number"] {
    -moz-appearance: textfield;
}
</style>
